/**
 * 微应用 Element UI 修复脚本
 * 此脚本需要在子应用中引入，用于修复 Element UI 样式问题
 */

(function () {
  console.log("🔧 微应用 Element UI 修复脚本启动...");

  // 等待DOM加载完成
  function waitForDOM(callback) {
    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", callback);
    } else {
      callback();
    }
  }

  // 修复 Element UI 样式
  function fixElementUIStyles() {
    // 检查是否已经修复
    if (document.getElementById("micro-element-ui-fix")) {
      return;
    }

    const style = document.createElement("style");
    style.id = "micro-element-ui-fix";
    style.textContent = `
      /* Element UI 组件样式修复 */
      .el-button {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: 0.1s;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
      }

      .el-button--primary {
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
      }

      .el-table {
        position: relative;
        box-sizing: border-box;
        flex: 1;
        width: 100%;
        max-width: 100%;
        background-color: #fff;
        font-size: 14px;
        color: #606266;
      }

      .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
      }

      .el-input__inner {
        appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: none;
        padding: 0 15px;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        width: 100%;
      }

      .el-icon {
        font-family: element-icons !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: baseline;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      .el-form-item {
        margin-bottom: 22px;
      }

      .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #606266;
        line-height: 40px;
        padding: 0 12px 0 0;
        box-sizing: border-box;
      }

      .el-pagination {
        white-space: nowrap;
        padding: 2px 5px;
        color: #303133;
        font-weight: bold;
      }

      .el-dialog {
        position: relative;
        margin: 0 auto 50px;
        background: #fff;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        width: 50%;
      }
    `;

    document.head.appendChild(style);
    console.log("✅ Element UI 样式修复已应用");
  }

  // 修复图标字体
  function fixElementUIIcons() {
    // 检查是否已加载 Element UI 图标字体
    const iconElements = document.querySelectorAll(
      '.el-icon, [class*="el-icon-"]'
    );

    if (iconElements.length > 0) {
      // 强制刷新图标样式
      iconElements.forEach((icon) => {
        icon.style.fontFamily = "element-icons, Arial, sans-serif";
        icon.style.fontStyle = "normal";
      });

      console.log(`🎨 修复了 ${iconElements.length} 个图标`);
    }
  }

  // 主修复函数
  function applyFixes() {
    fixElementUIStyles();

    // 延迟修复图标，等待组件渲染
    setTimeout(fixElementUIIcons, 500);

    // 监听新增的元素
    const observer = new MutationObserver((mutations) => {
      let hasNewIcons = false;

      mutations.forEach((mutation) => {
        if (mutation.type === "childList") {
          mutation.addedNodes.forEach((node) => {
            if (node.nodeType === Node.ELEMENT_NODE) {
              const element = node;
              if (
                element.classList.contains("el-icon") ||
                element.className.includes("el-icon-") ||
                (element.querySelector &&
                  element.querySelector('.el-icon, [class*="el-icon-"]'))
              ) {
                hasNewIcons = true;
              }
            }
          });
        }
      });

      if (hasNewIcons) {
        setTimeout(fixElementUIIcons, 100);
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  }

  // 等待DOM加载完成后执行修复
  waitForDOM(applyFixes);

  // 暴露给全局，供调试使用
  window.microElementUIFix = {
    fixStyles: fixElementUIStyles,
    fixIcons: fixElementUIIcons,
    applyAll: applyFixes,
  };

  console.log("✅ 微应用 Element UI 修复脚本已准备就绪");
})();
